<template>
  <div id="app">
    <Head @deviceChange="deviceChange" />
    <DetailData :device="device" />
  </div>
</template>

<script>
import Head from "./components/Head";
import DetailData from "./components/DetailData";
export default {
  name: "App",
  components: { Head, DetailData },
  data() {
    return {
      device: {},
      key: 0,
    };
  },
  created() {
    this.$http.get("/v1/deviceInfo/list").then((res) => {
      this.device = res.data[0];
    });
  },
  methods: {
    deviceChange(key) {
      this.key = key;
      this.getlist();
    },
    getlist() {
      this.$http.get("/v1/deviceInfo/list").then((res) => {
        this.device = res.data[this.key];
        console.log("get", this.device);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
}
</style>
